<template>
  <a-card class="app-marketing" :hoverable="true" title="营销应用">
    <a-row :gutter="20">
      <a-col :span="6">
        <h4>多人拼团</h4>
        <p>裂变式营销玩法</p>
      </a-col>
      <a-col :span="6">
        <h4>发券宝</h4>
        <p>拉新裂变促活精准营销</p>
      </a-col>
      <a-col :span="6">
        <h4>分销市场</h4>
        <p>一键上架 快速补充货源</p>
      </a-col>
      <a-col :span="6">
        <h4>微信小程序</h4>
        <p>一键生成抢占先机</p>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {},
})
</script>

<style lang="scss">
.app-marketing {
  @for $i from 1 through 5 {
    .ant-col:nth-child(#{$i}) {
      background: hsl($i * 20, 50%, 50%);
    }
  }
  .ant-row {
    text-align: center;
  }
  .ant-col {
    padding: 25px 0;
    color: #fff;
    h4 {
      color: #fff;
      font-size: 20px;
    }
  }
}
</style>
